<template>
    <div class="bossView">
      <slot name="content"></slot>
      <div class="arrow" v-if="!hideArrow">
        <img src="../../../static/img/bossVersion/arrow.png" />
      </div>
    </div>
</template>

<script>
export default {
  props: {
    hideArrow: {
      // 是否显示箭头动画效果，默认为不显示
      type: Boolean,
      default: () => {
        return true;
      }
    }
  },
  components: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "../../styles/bossVersion/_basics";

.bossView {
  @include absoluteAllSides;
  background: $mainBack;
  .arrow {
    position: absolute;
    bottom: -10px;
    left: 49.875%;
    z-index: 2;
    animation: arrow 2s linear infinite alternate;
    img {
      width: 125px;
      height: 126px;
    }
    @keyframes arrow {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(15px);
      }
    }
  }
}
</style>
